<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div></div>
    <input type="text">
    <script>
    // 获取一个元素
    // const div1=document.querySelector("div")
    // div1.addEventListener("click",function(){
    //     div1.style.backgroundColor="red"
    // })
    // 点击谁谁变量
    // const divList=document.querySelectorAll("div")


    // divList.forEach(div=>{
    //     div.addEventListener("click",function(){
           
    //         // 找到每一个元素背景为白色
    //         divList.forEach(div2=>{
    //               div2.style.backgroundColor = "white"

    //         })
    //          div.style.backgroundColor = "red"
    //     })
    
    // })
    //   const div2= document.querySelector("div")
//     //   鼠标触发事件
// div2.addEventListener("mouseenter",function(){
//     this.style.backgroundColor="blue"
// })
//     div2.addEventListener("mouseleave", function () {
//         this.style.backgroundColor = "black"
//     })



// 焦点事件
const input= document.querySelector("input")
input.addEventListener("focus",function(){
    this.style.backgroundColor="yellow"
})
    input.addEventListener("blur", function () {
        this.style.backgroundColor = "black"
    })
// 键盘按下事件,对body
// const body=document.querySelector("body")
// body.addEventListener("keydown",function(){
//     this.style.backgroundColor = "yellow"
// })
//     body.addEventListener("keyup", function () {
//         this.style.backgroundColor = "red"
//     })


    </script>
</body>